<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="工单信息" name="1">
        <FormPanel ref="formpanel" :list="formList" labelWidth="100" :isSubmitBtn="false" :rows="4" @formChange="formchangeFun" />
      </el-collapse-item>
    </el-collapse>

    <!-- <el-tabs v-model="tabName" @tab-click="handleClick">
      <el-tab-pane label="维修项目" name="first"></el-tab-pane>
      <el-tab-pane label="维修材料" name="second"></el-tab-pane>
      <el-tab-pane label="销售材料" name="third"></el-tab-pane>
      <el-tab-pane label="附加项目" name="fourth"></el-tab-pane>
    </el-tabs>-->
    <!-- <SettlementTables :type="tabName" :getdata="getdata" @close="closepop"></SettlementTables> -->
    <!-- <LazyLoadTab v-model="activeName" :tabMenus="menus"></LazyLoadTab> -->
    <BreakSpace label="维修项目"></BreakSpace>
    <firsttableTwo type="first" :getdata="getdata" />
    <BreakSpace label="维修材料"></BreakSpace>
    <secondtableTwo type:='second' :getdata="getdata"/>
    <div style="height:50px;"></div>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <!-- <el-button @click="closeDrawer(1)">打印工单</el-button> -->
      <el-button @click="closeDrawer(3)">取消</el-button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import dictCode from '@/utils/dictCode';
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import SettlementTables from './settlementTables.vue';
import { getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { getmaintainProjectTable, getoemList, getfindAllRepairType } from '@/api/repair/business/customer/history';
import firsttableTwo from './firsttableTwo';
import secondtableTwo from './secondtableTwo';

export default {
  name: 'zjjobdetalTow',
  components: {
    SettlementTables,
    firsttableTwo,
    secondtableTwo
  },
  mixins: [dictionary],
  props: ['getdata'],
  data() {
    return {
      activeNames: '1',
      formList: this.createFrom(),
      tableVisible: false,
      activeName: '维修项目',
      menus: [
        {
          title: '维修项目',
          path: 'repair/business/customer/Repairhistory/Detailed/firsttableTwo',
          params: {
            type: 'first',
            getdata: this.getdata
          }
        },
        {
          title: '维修材料',
          path: 'repair/business/customer/Repairhistory/Detailed/secondtableTwo',
          params: {
            type: 'second',
            getdata: this.getdata
          }
        }
        // {
        //   title: '销售材料',
        //   path: 'repair/business/customer/Repairhistory/Detailed/thirdtable',
        //   params: {
        //     type: 'third',
        //     getdata: { RO_NO: this.getdata.RO_NO }
        //   }
        // },
        // {
        //   title: '附加项目',
        //   path: 'repair/business/customer/Repairhistory/Detailed/fourthtable',
        //   params: {
        //     type: 'fourth',
        //     getdata: { RO_NO: this.getdata.RoNo }
        //   }
        // }
      ]
    };
  },
  created() {},
  mounted() {
    this.getEmp();
    this.getRepairType();
    this.getdetail();
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'RoNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'LicenseNo',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'Vin',
          disabled: true
        },
        // {
        //   type: 'SELECT',
        //   label: '工单类型',
        //   fieldName: 'RO_TYPE',
        //   itemList: this.createDictList('8068'),
        //   disabled: true
        // },
        {
          type: 'SELECT',
          label: '维修类型',
          fieldName: 'RoTypeCode',
          itemList: [],
          disabled: true
        },
        // ep-21874 暂时去除
        // {
        //   type: 'SELECT',
        //   label: '服务顾问',
        //   fieldName: 'ServiceConsultant',
        //   itemList: [],
        //   disabled: true
        // },
        {
          type: 'DATE_TIME',
          label: '开单日期',
          fieldName: 'OpenWorkTime',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '进厂里程',
          fieldName: 'EnterMileage',
          disabled: true
        },

        {
          type: 'DATE_TIME',
          label: '预交车时间',
          fieldName: 'DeliverDate',
          selfCols: 1.5,
          disabled: true
        }
      ];
    },
    formchangeFun(val) {},
    closepop(val) {
      this.tableVisible = false;
    },
    handleClick(val) {},
    formchangesFun(val) {},
    // 获取维修类型
    async getRepairType() {
      const res = await getfindAllRepairType();
      let list = res.data.map(x => ({ text: x.REPAIR_TYPE_NAME, value: x.REPAIR_TYPE_CODE + '' }));
      this.formList.find(item => item.fieldName === 'RoTypeCode').itemList = list; // 维修类型
    },
    getdetail() {
      this.formList.forEach(x => {
        x.initialValue = this.getdata[x.fieldName];
      });
    },
    // 获取全部员工
    async getEmp() {
      const res = await getDealerUser();
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      // this.formList.find(item => item.fieldName === 'ServiceConsultant').itemList = empList; // 服务专员
    },
    closeDrawer(type) {
      this.$emit('close', false);
    }
  }
};
</script>
